<template>
  <div id="popup1" class="ol-popup chart-popup">
    <span class="popup-title" title="popTitle">站点详情</span>
    <!-- <a href="#" id="popup-closer1" class="ol-popup-closer"></a> -->
    <span id="popup-closer1" class="ol-popup-closer"></span>
    <div id="popup-content1">
      <ul>
        <li>
          <span>站点名称：</span>{{station.stationName}}
        </li>
        <li>
          <span>站点编号：</span>{{station.stationNumber}}
        </li>
        <li>
          <span>地市：</span>{{station.stationAddress}}
        </li>
        <li>
          <span>区县：</span>{{station.stationCounty}}
        </li>
        <li>
          <span>经度：</span>{{station.longitude}}
        </li>
        <li>
          <span>纬度：</span>{{station.latitude}}
        </li>
        <li>
          <span>创建时间：</span>{{station.createTime}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'Search',
  props: {
    cOption: Object,
  },
  data() {
    return {
      station:{}
    }
  },
  watch: {
    cOption: {
      handler(newOp, oldOp) {
        this.updateList();
      },
      deep: true,
    },
  },
  mounted() {
    this.initList();
  },
  methods: {
    initChart() {
      this.updateList();
    },
    updateList() {
      this.station = this.cOption;
    }
  },
}
</script>

<style lang="scss">
.popover {
  width: 260px;
}

.ol-popup.chart-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 24px 15px 15px 15px;
  border-radius: 4px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 395px;
  min-height: 230px;
  font-size: 13px;
  z-index: 1000;
  display: grid;
  .popup-title {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 15px;
    color: #3285ff;
    font-size: 14px;
    font-weight: bold;
    line-height: 24px;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: keep-all;
    white-space: nowrap;
  }
}

/* .ol-popup:after,
  .ol-popup:before {
  	top: 100%;
  	border: solid transparent;
  	content: " ";
  	height: 0;
  	width: 0;
  	position: absolute;
  	pointer-events: none;
  }

  .ol-popup:after {
  	border-top-color: white;
  	border-width: 10px;
  	left: 48px;
  	margin-left: -10px;
  }

  .ol-popup:before {
  	border-top-color: #cccccc;
  	border-width: 11px;
  	left: 48px;
  	margin-left: -11px;
  } */

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 5px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}

.ol-popup p {
  border-bottom: 1px dashed #dedede;
}

#popup-content1 {
  width: 100%;
  height: 100%;
}

#popup-content1 li {
  line-height: 24px;
}
</style>
